<template>
<div>
    <!-- <Button @click="modals = true">Custom header and footer</Button> -->
    <Modal v-model="modals"  :closable="false" :mask-closable="false" class="vertical-center-modal">
        
        <p slot="header" style="text-align:center">
            <Icon type="information-circled"></Icon>
            <span>创建项目</span>
            <a slot="close" href="javascript:;" class="close" @click="del"><Icon type="ios-close-empty"></Icon></a>
        </p>
        
        <div style="text-align:left">
            <create-project 
            :currents="current"
            :stepname="idname"
            ref="childCreate"></create-project>
        </div>
        <div slot="footer">
            <!-- <Button type="text" size="large"  @click="del">取消</Button>  -->
            <Button type="primary" size="large"  @click="prev" v-if="flag">上一步</Button>            
            <Button type="primary" size="large"  @click="next">{{btntitle}}</Button>
        </div>
    </Modal>
</div>

</template>
<script>
import CreateProject from "../components/createproject.vue";
export default {
  components: {
    CreateProject
  },
  data() {
    return {
      modalstatus: false,
      idname: "stepone",
      current: 0,
      btntitle: "下一步",
      flag: false
    };
  },
  props: ["modals"],
  methods: {
    del() {
      this.$emit("changestatus", this.modalstatus);
      this.current = 0;
      this.idname = "stepone";
      this.btntitle = "下一步";
    },
    next() {
      this.$refs.childCreate.$refs.childStepAll.$refs.childStep.handleSubmit(
        this.nextCurrent
        )
    },
    prev() {
      if (this.current > 0) {
        this.current--;
        this.btntitle = "下一步";
      }
      switch (this.current) {
        case 0:
          this.idname = "stepone";
          this.flag = false
          break;
        case 1:
          this.idname = "steptwo";

          break;
        case 2:
          this.idname = "stepthree";
          break;
        case 3:
          this.idname = "stepfour";
          // this.$Modal.remove()
          break;
      }
    },
    nextCurrent() {
        if (this.$store.state.project.valid) {
            if (this.current <1) {
                console.log(123)
                this.current += 1;
                this.btntitle = "下一步";
                this.flag = true
                if (this.current == 1) {
                    this.btntitle = "提交";
                }
            }
            switch (this.current) {
            case 0:
                this.idname = "stepone";
                this.flag = false
                break;
            case 1:
                this.idname = "steptwo";

                break;
            case 2:
                this.idname = "stepthree";
                break;
            case 3:
                this.idname = "stepfour";
                // this.$Modal.remove()
                break;
            }
        }
    }
  }
};
</script>
<style lang="less" scoped>
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
  .close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    color: black;
  }
}
</style>
